.inline-help {
	position: fixed;
	right: 24px;
	bottom: 24px;

	z-index: z-index( 'root', '.floating-help' );

	.button.inline-help__happychat-button {
		position: absolute;
		bottom: 60px;
		right: 5px;

		line-height: 0;
		padding: 1px;
		border-radius: 100%;
		background: var( --color-primary );
		box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.15 );
		border: 1px solid var( --color-primary );

		.gridicon {
			fill: var( --color-text-inverted );
			margin: 2px;
			top: 0;
			height: 24px;
			width: 24px;
		}

		&.is-active {
			background: var( --color-primary );
			border-color: var( --color-primary-40 );
		}
	}

	.button.inline-help__happychat-button.has-unread {
		background-color: var( --color-accent );
		border-color: var( --color-accent );
	}

	@include breakpoint-deprecated( '<660px' ) {
		.button.is-borderless.inline-help__button {
			padding: 1px;
		}
	}
}

.button.inline-help__classic-editor-toggle,
.button.inline-help__gutenberg-editor-toggle {
	margin-bottom: 16px;
	width: calc( 100% - 32px );
}

.button.is-borderless.inline-help__button {
	position: absolute;
	right: 0;
	bottom: 0;
	line-height: 0;
	padding: 1px;
	border-radius: 100%;
	background-color: var( --color-primary );
	@include elevation( 4dp );
	border: 1px solid var( --color-primary-dark );
	transition: all 0.2s ease-in-out;
	overflow: visible;

	&:focus {
		background-color: var( --color-primary );
		box-shadow: 0 0 0 2px var( --color-primary-light );
	}

	.gridicon {
		fill: var( --color-text-inverted );
		margin: 0;
		top: 0;
		height: 36px;
		width: 36px;

		> use:first-child,
		> g:first-child {
			transform: none;
		}
	}

	&:hover:not( .is-active ) {
		@include elevation( 6dp );
		background: var( --color-primary );
		transform: scale( 1.15 );
	}

	&.is-active {
		background: var( --color-primary );
		border-color: var( --color-primary-40 );
	}

	&.has-notification::before {
		display: block;
		background-color: var( --color-accent-30 );
		border: 2px solid var( --color-border-inverted );
		content: '';
		border-radius: 50%;
		width: 10px;
		height: 10px;
		position: absolute;
		top: -2px;
		left: -3px;
	}
}

.inline-help__mobile-overlay {
	background: rgba( var( --color-neutral-0-rgb ), 0.8 );
	bottom: 0;
	height: 100%;
	position: fixed;
	right: 0;
	left: 0;
	z-index: z-index( 'root', '.inline-help__mobile-overlay' );
}

.inline-help__popover.popover {
	@include breakpoint-deprecated( '<660px' ) {
		margin-top: -5px;
		width: calc( 100% - 28px );
	}

	p {
		font-size: $font-body-extra-small;

		@include breakpoint-deprecated( '>660px' ) {
			font-size: $font-body-small;
		}
	}

	a,
	button {
		font-size: $font-body-extra-small;

		@include breakpoint-deprecated( '>660px' ) {
			font-size: $font-body-small;
		}
	}

	@include breakpoint-deprecated( '>660px' ) {
		width: 320px;

		position: fixed;
		top: auto !important;
		bottom: 76px !important;
	}

	&.is-top .popover__arrow::before,
	&.is-top-left .popover__arrow::before,
	&.is-top-right .popover__arrow::before {
		border-top: 10px solid var( --color-neutral-0 );
	}
}

.inline-help__search {
	.is-secondary-view-active & {
		display: none;
	}

	.search-card {
		border-radius: 2px 2px 0 0;
		margin: 0;

		.search {
			border-radius: 2px 2px 0 0;

			&.is-open.has-focus {
				box-shadow: 0 0 0 1px var( --color-primary ), 0 0 0 6px var( --color-primary-light );

				@include breakpoint-deprecated( '>660px' ) {
					box-shadow: 0 0 0 1px var( --color-primary ), 0 0 0 4px var( --color-primary-light );
				}
			}

			.search__input {
				font-size: $font-body;
				padding: 12px 0;
				color: var( --color-text );

				@include breakpoint-deprecated( '>660px' ) {
					padding: 16px 0;
				}
			}

			.search__icon-navigation:focus {
				border-radius: 2px;
				box-shadow: 0 0 0 3px var( --color-primary-light );
			}
		}
	}

	.button {
		vertical-align: middle;
	}
}

.inline-help__secondary-view {
	display: none;

	box-sizing: border-box;
	max-height: 70vh;
	min-height: 206px;
	overflow-y: auto;
	padding: 16px;

	.is-secondary-view-active & {
		display: block;
	}

	.button {
		width: 100%;
		text-align: center;
	}
}

.inline-help__view-heading {
	display: block;
	font-size: $font-body-small;
	font-weight: 600;
	margin-bottom: 5px;
}

.inline-help__richresult {
	text-align: left;

	.inline-help__richresult__title {
		display: block;
		font-size: $font-body-small;
		font-weight: 600;
		margin-bottom: 5px;
	}
}

.inline-help__forum-view {
	text-align: left;
}

.inline-help__contact {

	.inline-help__title {
		@include hide-content-accessibly;
	}

	.help-contact__form {
		margin: 0;
		padding: 0;
		box-shadow: none;
		text-align: left;
		border-radius: 2px 2px 0 0;

		.sites-dropdown__wrapper {
			max-width: 100%;

			.site__content {
				padding: 8px;
			}
		}

		.help-contact-confirmation {
			min-height: auto;
			height: auto;

			.help-contact-confirmation__contents {
				margin: 20px 0;
			}
		}
	}

	.help-contact-form__site-selection {
		margin-bottom: 8px;
	}

	.sites-dropdown {
		.site-selector .search {
			top: 51px;
		}
		.site-selector__sites {
			max-height: 20vh;
		}
	}
}

.inline-help__footer {
	background: var( --color-neutral-0 );
	border-top: 1px solid var( --color-neutral-10 );
	border-radius: 0 0 2px 2px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;

	.button.is-borderless.inline-help__more-button,
	.button.is-borderless.inline-help__contact-button,
	.button.is-borderless.inline-help__cancel-button {
		text-align: left;
		position: relative;
		padding: 12px 8px 12px 46px;

		.gridicon.inline-help__gridicon-left {
			margin: 0;
			position: absolute;
			top: 11px;
			left: 13px;
		}

		.gridicon.inline-help__gridicon-right {
			margin: 0;
			position: absolute;
			top: 11px;
			right: 13px;
		}

		&:hover {
			color: var( --color-primary );

			.gridicon {
				fill: var( --color-primary );
			}
		}
	}

	.button.is-borderless.inline-help__contact-button {
		padding-right: 40px;
	}

	// Hide/Show buttons as needed
	.inline-help__cancel-button {
		display: none;
	}

	.is-secondary-view-active & {
		.inline-help__more-button,
		.inline-help__contact-button {
			display: none;
		}

		.inline-help__cancel-button {
			display: block;
		}
	}
}


.inline-help__results {

	padding: 8px 0;

	.help-contact-form & {
		padding: 0;
	}
}

.inline-help__results-list {
	list-style: none;
	text-align: left;
	margin: 0;
	padding: 0;
}

.inline-help__results-title {
	font-weight: bold;
	line-height: 1.4;
	display: block;
	padding: 8px 16px;
	font-size: $font-body-small;
	text-align: left;

	&::after {
		content: ':';
	}
}

.inline-help__results-cell {
	width: 100%;
}

.inline-help__results-item {
	margin: 0;
	font-size: $font-body-small;

	@include breakpoint-deprecated( '>660px' ) {
		font-size: $font-title-small;
		line-height: 1.3;
	}

	a {
		//color: var( --color-primary );
		text-decoration: underline;
		font-weight: normal;
		line-height: 1.4;
		display: flex;
		padding: 8px 16px;

		span {
			flex-grow: 2;
		}

		.gridicon {
			align-self: baseline;
			color: var( --color-neutral-light );
			flex-shrink: 0;
			margin-right: 8px;
			position: relative;
			top: 2px;
		}

		&:hover {
			cursor: pointer;
			//color: var( --color-primary );
			background: var( --color-neutral-0 );

			.gridicon {
				color: var( --color-neutral );
			}
		}

		&:focus {
			background: var( --color-primary );
			color: var( --color-text-inverted );

			.gridicon {
				color: var( --color-text-inverted );
			}
		}
		
	}

	.help-contact-form & {
		a {
			padding-left: 0;

			&:hover {
				background: none;
			}
		}
	}
}

.inline-help__empty-results {
	padding: 8px 16px 0;
	margin: 0;
	font-size: $font-body-small;
	color: var( --color-text-subtle );
	font-style: italic;
	text-align: left;

	@include breakpoint-deprecated( '>660px' ) {
		font-size: $font-body;
	}
}

// PlaceholderLines component
.inline-help__results-placeholder {
	margin: 16px;
	min-height: 120px;
}

.inline-help__results-placeholder-item {
	height: 16px;
	margin: 16px 0;
	border-radius: 16px;
	background-color: var( --color-neutral-0 );
	color: transparent;
	animation: inline-help__results-placeholder-loading 2s cubic-bezier( 0.175, 0.885, 0.32, 1.275 ) infinite;
	animation-delay: 0s;

	&:nth-child( 1 ) {
		animation-delay: -1.3s;
	}

	&:nth-child( 2 ) {
		animation-delay: -2.5s;
	}

	&:nth-child( 3 ) {
		animation-delay: -3.8s;
	}

	&::after {
		content: '\00a0';
	}
}

@keyframes inline-help__results-placeholder-loading {
	0% {
		opacity: 0.3;
		width: 65%;
	}
	25% {
		opacity: 0.6;
		width: 90%;
	}
	50% {
		opacity: 0.5;
		width: 18%;
	}
	75% {
		opacity: 0.8;
		width: 75%;
	}
	100% {
		opacity: 0.3;
		width: 65%;
	}
}
